<template>
    <div class="bg">
         <topNav txt="填写验证码" :mode="2" ></topNav>
         <div class="tip">短信验证码已发送，请填写验证码</div>
         <div class="list_box color_818181">
             <div class="title">手机号</div>
             <div class="conent">+86 12345678901</div>
         </div>
         <div class="list_box">
             <div class="title">验证码</div>
             <input type="text" placeholder="请输入验证码">
             <!-- <div class="conent">+86 12345678901</div> -->
         </div>
         <div class="submit">提交</div>
         <div class="help"><span @click="show = true">收不到验证码？</span> </div>
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />

    </div>
</template>
<script>
import topNav from "@/components/return"
export default {
components: {
    topNav
  },
  data(){
      return{
          show:false,
          actions:[{name:'从新获取验证码'}]
      }
  },
  methods:{
      onSelect(){
          this.$dialog.confirm({
            title: '',
            message: '短信验证码有点延迟，确定返回并重新开始',
            confirmButtonText:'返回',
            cancelButtonText:'等待',
            confirmButtonColor:'#5B6B7E'
            })
            .then(() => {
                // on confirm
                this.$router.go(-1)
            })
            .catch(() => {
                // on cancel
            });
          this.show = false

      }
  }
}
</script>
<style  scoped>
.bg{
    background: #EDEDED;
    width: 100vw;
    height: 100vh;
}
.tip{
    height: 60px;
    text-align: center;
    line-height: 60px;
}
.list_box{
    height: 40px;
    display: flex;
    align-items: center;
    margin: 0 20px;
}
.title{
width: 80px;
}
.conent{

}
.list_box input{
    border: none;
    outline: none;
    background: #EDEDED;
}
.color_818181{
    color: #818181;
}
.submit{
    margin: 30px 20px 10px 20px;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    background: #4ac7d7;
    /* color: #B1B1B1; */
}
.help{
     text-align: center;
   height: 20px;
    line-height: 20px; 
    color: #5E6E8D;
    font-size: 12px;
}
</style>